<template>
	<view class="box">
		<view class="status_bar">
			<view class="top_view">
				<!-- <image src="../../static/index/logo.png" mode="widthFix" class="logo"></image> -->
				<text class="iconfont icon-xiazai6" @tap="jump()"></text>
				<!-- <text>矿机商城</text>
				<view class=""></view> -->
			</view>
		</view>
		<view class="senter">
			<view class="title">登录</view>
			<view class="phon">
				<view @tap="dizhi">
					国家/地址
					<text>
						中国
						<text>
							+86
							<i class="iconfont icon-youjiantou"></i>
						</text>
					</text>
				</view>
				<input type="text" value="" placeholder="请输入手机号" />
			</view>
			<view class="yanzhengma">
				<view>密码</view>
				<view>
					<input type="text" value="" placeholder="请输入密码" password="true" />
					<!-- <input type="text" value=""  focus password="true" selection-start="1"/>
					<input type="text" value="" focus password="true" />
					<input type="text" value="" focus password="true" />
					<input type="text" value="" focus password="true" /> -->
				</view>
				<view @tap="yanzhengma()">
					<text>用短信验证码登录<i class="iconfont icon-youjiantou"></i></text>
				</view>
			</view>
			<button type="primary" class="btn">登录</button>
			<view class="p">
				<text></text>
				<text>第三方登录</text>
				<text></text>
			</view>
			<view class="pic">
				<i class="iconfont icon-weixin"></i>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			jump(){
				uni.navigateBack({
				    delta: 1
				});
			},
			dizhi(){
				uni.navigateTo({
					url:"../diquxuanze/diquxuanze"
				})
			},
			yanzhengma(){
				uni.navigateTo({
					url:"../zhuce/zhuce"
				})
			}
		}
	}
	
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	.box {
		font-family: PingFang SC;
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #1f1e24;
		.status_bar {
			box-sizing: border-box;
			// 自定义状态栏高度
			height: var(--status-bar-height);
			position: relative;
			height: 88upx;
			// transparent
			background-color: #fff;
			.top_view {
				box-sizing: border-box;
				background-color: #1f1e24;
				height: 88upx;
				padding: 0 30upx;
				// padding-top: calc(25upx + var(--status-bar-height));
				width: 100%;
				position: fixed;
				top: 0;
				z-index: 999;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36upx;
				color: #E3E2DF;
				.logo {
					width: 37upx;
					height: 37upx;
				}
			}
		}
		.senter {
			padding: 0 57upx;
			.icon-youjiantou{
				color:rgba(153,153,153,1);
				font-size:26upx ;
				margin-left: 5upx;
			}
			.title {
				font-size: 43upx;
				color: #ffe093;
				margin-top: 116upx;
			}
			.phon {
				margin-top: 83upx;
				& > view {
					font-size: 32upx;
					color: #f2f2f2;
					& > text:nth-child(1){
						margin-left: 10upx;
						text {
							color: #ffdf97;
						}
					}
				}
				input {
					box-sizing: border-box;
					width: 635upx;
					height: 79upx;
					font-size: 32upx;
					color: #eeeeee;
					background-color: rgba(242, 242, 242, 0.1);
					margin-top: 38upx;
					padding: 0 15upx;
					
				}
			}
			.yanzhengma {
				& > view:nth-child(1) {
					font-size: 32upx;
					color: rgba(255, 223, 146, 1);
					margin-top: 29upx;
				}
				& > view:nth-child(2) {
					display: flex;
					align-items: center;
					& > input {
						box-sizing: border-box;
						width: 635upx;
						height: 79upx;
						font-size: 32upx;
						color: #eeeeee;
						background-color: rgba(242, 242, 242, 0.1);
						margin-top: 38upx;
						padding: 0 15upx;
					}
				}
				& > view:nth-child(3) {
					font-size: 28upx;
					color: rgba(153, 153, 153, 1);
					text {
						margin-top: 30upx;
						display: inline-block;
						padding: 0 20upx;
					}
					text:nth-child(1) {
						height: 32upx;
						line-height: 32upx;
						// border-right: 1upx solid #999999;
						padding-left: 0;
					}
				}
			}
			.btn {
				width: 635upx;
				height: 88upx;
				background-color: #ffe093;
				color: #1f1e24;
				font-size: 32upx;
				line-height: 88upx;
				text-align: center;
				margin-top: 58upx;
				border-radius: 0;
			}
		    .p{
				font-size:28upx ;
				color:rgba(153,153,153,1);
				display: flex;
				margin-top: 88upx;
				justify-content: space-between;
				align-items: center;
				text{
					display: inline-block;
					flex: 1;
				}
				text:nth-child(1),text:nth-child(3){
					width: 100%;
					height: 1upx;
					background-color:rgba(153,153,153,1) ;
				}
				text:nth-child(2){
					margin: 0 5upx;
					text-align: center;
				}
			}
			.pic{
				margin-top: 56upx;
				 text-align:center;
				i{
				  font-size: 86upx;
				  color:rgba(153,153,153,1);
				}
			}
		}
		
	}
}
</style>
